<template>
    <div>
        <div class="homeMain-title">
            流程审批
        </div>
        <Tabs type="card" class="homeMain-tabs-card">
            <TabPane label="发起流程">
                <div class="mt-10 homeMain-tabs-card-bg">
                    <Button class="btBg" v-for="(canStartProcess, index) in canStartProcessList" :key="index" @click="startProcessClick(canStartProcess.procDefKey)">{{canStartProcess.processName}}</Button>
                </div>
            </TabPane>
            <TabPane :label="showWaitingDataLabel">
                <Table :columns="waitingColumns" :data="waitingData" class="mt-10" height="280">
                </Table>
                <div @click="goToWaitingDataList" class="newMoreStyle">
                    查看更多>
                </div>
            </TabPane>
            <TabPane label="我发起的">
                <Table :columns="inProcessColumns" :data="inProcessData" class="mt-10" height="280">
                </Table>
                <div @click="goToInProcessDataList" class="newMoreStyle">
                    查看更多>
                </div>
            </TabPane>
            <TabPane label="抄送我的">
                <Table :columns="duplicateColumns" :data="duplicateData" class="mt-10" height="280">
                </Table>
                <div @click="goToDuplicateDataList" class="newMoreStyle">
                    查看更多>
                </div>
            </TabPane>
        </Tabs>
        <task-form-modal v-model="showForm" @resetPage="resetPage" :btnType="btnTypeStr" :processNode="currentTaskForm"
                         :formLayoutList="currentFormLayoutList" :taskInfoId="currentId"></task-form-modal>
    </div>
</template>

<script>
    import taskFormModal from '../../../workflow/pages/process/taskFormModal';
    export default {
        name: 'missionModule',
        components: {
            taskFormModal
        },
        data () {
            return {
                waitingDataLabel: 0,
                inProcessDataLabel: '我发起的',
                duplicateDataLabel: '抄送我的',
                showForm: false,
                currentTaskForm: {},
                currentFormLayoutList: [],
                currentId: '',
                btnTypeStr: '',
                waitingColumns: [
                    {
                        title: '序号',
                        type: 'index',
                        maxWidth: 60
                        // align: 'center'
                        // fixed: 'left'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        // align: 'center',
                        // width: 80,
                        // fixed: 'right',
                        render: (h, params) => {
                            let handleBtnName = '处理';
                            if (params && params.row && params.row.processNode && params.row.processNode.handleName) {
                                handleBtnName = params.row.processNode.handleName;
                            }
                            return h('div', [
                                h('span', [
                                    h('tooltip', {
                                        props: {
                                            content: handleBtnName,
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '3px'

                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                type: 'md-person',
                                                size: 18
                                            },
                                            style: {
                                                backgroundColor: 'rgba(255, 255, 255, .5)',
                                                border: 'none',
                                                color: '#fff'
                                            },
                                            on: {
                                                click: () => {
                                                    this.handleTask(params);
                                                    // this.modal1 = true
                                                    // this.roleList(1)
                                                }
                                            }

                                        })
                                    ])
                                ])

                            ]);
                        }
                    },
                    {
                        title: '流程名称',
                        key: 'workflowInstance.title',
                        // minWidth: 200,
                        // maxWidth: 500,
                        ellipsis: true,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                on: {
                                    click: () => {
                                        this.viewDetail(params.row.id);
                                    }
                                },
                                style: {
                                    cursor: 'pointer'
                                }
                            }, params.row.workflowInstance.title);
                        }
                    },
                    {
                        title: '任务类型',
                        key: 'workflowInstance.processDefine.name',
                        ellipsis: true,
                        // minWidth: 200,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.workflowInstance.processDefine.name);
                        }
                    },
                    {
                        title: '任务名称',
                        key: 'processNode.taskDefName',
                        ellipsis: true,
                        // minWidth: 200,
                        // maxWidth: 700,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                            }, params.row.processNode.taskDefName);
                        }
                    },
                    {
                        title: '发起人',
                        key: 'workflowInstance.startUserName',
                        // width: 100,
                        ellipsis: true,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.workflowInstance.startUserName);
                        }
                    },
                    {
                        title: '发起时间',
                        key: 'workflowInstance.startTime',
                        ellipsis: true,
                        // width: 160,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.workflowInstance.startTime);
                        }
                    }
                ],
                waitingData: [],
                inProcessColumns: [
                    {
                        title: '序号',
                        type: 'index',
                        maxWidth: 60
                        // align: 'center'
                        // fixed: 'left'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        // width: 140,
                        // align: 'center',
                        // fixed: 'right',
                        render: (h, params) => {
                            console.log(params.row.statusCode.canRevocation, ' params.row.statusCode.canRevocation');
                            return h('div', [
                                // h('span', [
                                //     h('tooltip', {
                                //         props: {
                                //             content: '查看详情',
                                //             trigger: 'hover',
                                //             size: 'small',
                                //             placement: 'bottom'
                                //         },
                                //         style: {
                                //             marginRight: '3px'

                                //         }
                                //     }, [
                                //         h('Button', {
                                //             props: {
                                //                 align: 'center',
                                //                 icon: 'ios-search-outline'
                                //             },
                                //             on: {
                                //                 click: () => {
                                //                     this.viewDetail(params.row.id);
                                //                 // this.modal1 = true
                                //                 // this.roleList(1)
                                //                 }
                                //             }

                                //         })
                                //     ])
                                // ]),

                                h(params.row.statusCode === 'readyStart' ? 'span' : '', [
                                    h('tooltip', {
                                        props: {
                                            content: '编辑',
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '3px'

                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                size: 18,
                                                type: 'ios-create-outline'
                                            },
                                            on: {
                                                click: () => {
                                                    this.editMissionDetails(params.row.id);
                                                    // this.modal1 = true
                                                    // this.roleList(1)
                                                }
                                            }

                                        })
                                    ])
                                ]),
                                h(params.row.statusCode === 'readyStart' || params.row.canRevocation ? 'span' : '', [
                                    h('tooltip', {
                                        props: {
                                            content: '撤销',
                                            trigger: 'hover',
                                            size: 'small',
                                            placement: 'bottom'
                                        },
                                        style: {
                                            marginRight: '3px'

                                        }
                                    }, [
                                        h('Icon', {
                                            props: {
                                                type: 'ios-undo-outline',
                                                size: 18
                                            },
                                            style: {
                                                backgroundColor: 'rgba(255, 255, 255, .5)',
                                                border: 'none',
                                                color: '#fff'

                                            },
                                            on: {
                                                click: () => {
                                                    this.delMissionDetails(params.row.id);
                                                    // this.modal1 = true
                                                    // this.roleList(1)
                                                }
                                            }

                                        })
                                    ])
                                ])
                            ]);
                        }
                    }, {
                        title: '流程名称',
                        key: 'workflowInstance.title',
                        // align: 'center',
                        ellipsis: true,
                        // minWidth: 200,
                        // maxWidth: 500,
                        // fixed: 'left',
                        render: (h, params) => {
                            return h('span', {
                                on: {
                                    click: () => {
                                        this.viewDetail(params.row.id);
                                    }
                                },
                                style: {
                                    cursor: 'pointer'
                                }
                            }, params.row.workflowInstance.title);
                        }
                    }, {
                        title: '任务类型',
                        key: 'workflowInstance.processDefine.name',
                        ellipsis: true,
                        // minWidth: 100,
                        // maxWidth: 200,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.workflowInstance.processDefine.name);
                        }
                    }, {
                        title: '任务名称',
                        key: 'processNode.taskDefName',
                        ellipsis: true,
                        // minWidth: 200,
                        // maxWidth: 537,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                            }, params.row.processNode.taskDefName);
                        }
                    }, {
                        title: '发起时间',
                        key: 'workflowInstance.startTime',
                        ellipsis: true,
                        // maxWidth: 160,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.workflowInstance.startTime);
                        }
                    }, {
                        title: '状态',
                        // tooltip: true,
                        ellipsis: true,
                        // width: 120,
                        key: 'startStatusName'
                        // align: 'center'
                    }, {
                        title: '处理时间',
                        key: 'processNode.completedTime',
                        ellipsis: true,
                        // maxWidth: 160,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.completedTime);
                        }
                    }
                ],
                inProcessData: [],
                duplicateColumns: [
                    {
                        title: '序号',
                        type: 'index',
                        maxWidth: 60
                        // width: 80,
                        // align: 'center'
                    // fixed: 'left'
                    }, {
                        title: '流程名称',
                        key: 'workflowInstance.title',
                        ellipsis: true,
                        // minWidth: 180,
                        // fixed: 'left',
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                on: {
                                    click: () => {
                                        this.viewDetail(params.row.id, true);
                                    }
                                },
                                style: {
                                    cursor: 'pointer'
                                }
                            }, params.row.workflowInstance.title);
                        }
                    }, {
                        title: '任务类型',
                        key: 'workflowInstance.processDefine.name',
                        // align: 'center',
                        ellipsis: true,
                        // minWidth: 180,
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.workflowInstance.processDefine.name);
                        }
                    }, {
                        title: '任务名称',
                        key: 'processNode.taskDefName',
                        ellipsis: true,
                        // minWidth: 200,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                            }, params.row.processNode.taskDefName);
                        }
                    }, {
                        title: '发起时间',
                        ellipsis: true,
                        // width: 160,
                        key: 'workflowInstance.startTime',
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.workflowInstance.startTime);
                        }
                    }, {
                        title: '当前处理人',
                        ellipsis: true,
                        // width: 120,
                        key: 'taskHandleName'
                        // align: 'center'
                    }, {
                        title: '状态',
                        // width: 120,
                        ellipsis: true,
                        key: 'statusName',
                        // align: 'center',
                        render: (h, params) => {
                            var spanName = '';
                            if (params.row.statusCode === 'readyStart') {
                                spanName = '待开启';
                            } else if (params.row.statusCode === 'waiting') {
                                spanName = '待审批';
                            } else if (params.row.statusCode === 'processing') {
                                spanName = '审批中';
                            } else if (params.row.statusCode === 'completed') {
                                spanName = '审批完成';
                            }
                            return h('span', {
                                props: {}
                            }, spanName);
                        }
                    }, {
                        title: '处理时间',
                        ellipsis: true,
                        key: 'processNode.completedTime',
                        // width: 160,
                        // align: 'center',
                        render: (h, params) => {
                            return h('span', {
                                props: {

                                }
                            }, params.row.completedTime);
                        }
                    }
                    // {
                    //     title: '操作',
                    //     key: 'action',
                    //     // align: 'center',
                    //     // width: 90,
                    //     // fixed: 'right',
                    //     render: (h, params) => {
                    //         return h('div', [
                    //             h('span', [
                    //                 h('tooltip', {
                    //                     props: {
                    //                         content: '查看详情',
                    //                         trigger: 'hover',
                    //                         size: 'small',
                    //                         placement: 'bottom'
                    //                     },
                    //                     style: {
                    //                         marginRight: '3px'

                    //                     }
                    //                 }, [
                    //                     h('Button', {
                    //                         props: {
                    //                             align: 'center',
                    //                             icon: 'ios-search-outline'
                    //                         },
                    //                         on: {
                    //                             click: () => {
                    //                                 this.viewDetail(params.row.id, true);
                    //                             // this.modal1 = true
                    //                             // this.roleList(1)
                    //                             }
                    //                         }

                    //                     })
                    //                 ])
                    //             ])

                    //         ]);
                    //     }
                    // }
                ],
                duplicateData: [],
                canStartProcessList: []
            };
        },
        mounted () {
            this.loadCanStartProcess();
            this.loadInProcessData();
            this.loadWaitingTask();
            this.loadDuplicateTask();
        },
        methods: {
            // 加载可发起流程列表
            loadCanStartProcess () {
                depot.get({
                    url: this.URL.WORKFLOW.FIND_START_PROCESS_LIST,
                    cb: (data) => {
                        if (data.code === 0) {
                            if (data.data.length) {
                                this.canStartProcessList = this.canStartProcessList.concat(data.data);
                            }
                            console.log(this.canStartProcessList, 'this.canStartProcessList');
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                    }
                });
            },
            startProcessClick (menu) {
                this.$router.push({
                    name: 'startProcess',
                    params: {
                        selectedStartProcess: menu,
                        canStartProcessList: this.canStartProcessList
                    }
                });
            },
            // 刷新页面
            resetPage () {
                this.showForm = false;
                this.loadInProcessData();
                this.loadWaitingTask();
                this.loadDuplicateTask();
            },
            showWaitingDataLabel (h) {
                return h('div', [
                    h('span', '待我审批'),
                    h('Badge', {
                        props: {
                            count: this.waitingDataLabel
                        }
                    })
                ]);
            },
            loadWaitingTask () {
                depot.get({
                    url: this.URL.WORKFLOW.FIND_WAITING_TASK_LIST,
                    cb: (data) => {
                        if (data.code === 0) {
                            if (data.data.content.length > 5) {
                                this.waitingData = data.data.content.slice(0, 5);
                            } else {
                                this.waitingData = data.data.content;
                            }
                            this.waitingDataLabel = data.data.totalElements;
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                    }
                });
            },
            loadInProcessData () {
                depot.get({
                    url: this.URL.WORKFLOW.FIND_INPROCESS_TASK_LIST,
                    cb: (data) => {
                        if (data.code === 0) {
                            if (data.data.content.length > 5) {
                                this.inProcessData = data.data.content.slice(0, 5);
                            } else {
                                this.inProcessData = data.data.content;
                            }
                            this.inProcessDataLabel = '我发起的(' + data.data.totalElements + ')';
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                    }
                });
            },
            loadDuplicateTask () {
                depot.get({
                    url: this.URL.WORKFLOW.FIND_DUPLICATE_LIST,
                    cb: (data) => {
                        if (data.code === 0) {
                            if (data.data.content.length > 5) {
                                this.duplicateData = data.data.content.slice(0, 5);
                            } else {
                                this.duplicateData = data.data.content;
                            }
                            this.duplicateDataLabel = '抄送我的(' + data.data.totalElements + ')';
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                    }
                });
            },
            // 打开表单
            handleTask (taskInfo, btnType) {
                if (!taskInfo || !taskInfo.row) {
                    this.$Message.error('系统错误，获取任务信息失败！');
                }
                let processNode = taskInfo.row.processNode;
                if (!processNode) {
                    this.$Message.error('系统错误，获取任务信息失败！');
                }
                let processNodeId = processNode.id;
                if (!processNodeId) {
                    this.$Message.error('系统错误，获取任务信息失败！');
                }

                let queryParams = {};
                queryParams.taskInfoId = taskInfo.row.id;
                depot.get({
                    url: this.URL.WORKFLOW.FIND_CURRENT_FORM_LAYOUT_LIST_BY_TASK_INFO_ID,
                    config: {
                        params: queryParams
                    },
                    cb: (data) => {
                        if (data.code === 0) {
                            // TODO 获取表单布局

                            let formLayoutList = data.data;

                            if (!formLayoutList.length) {
                                this.$Message.error('未找到布局信息！');
                                this.closePage();
                                return;
                            }

                            if (formLayoutList.length > 0) {
                                formLayoutList.forEach((formLayout, formIndex) => {
                                    formLayout.formData = {};
                                    formLayout.layout = JSON.parse(formLayout.context);
                                    let rows = formLayout.layout.layout.rows;
                                    if (rows && rows instanceof Array && rows.length > 0) {
                                        rows.forEach((row) => {
                                            let cols = row.cols;
                                            if (cols && cols instanceof Array && cols.length > 0) {
                                                cols.forEach((col) => {
                                                    let type = col.type;
                                                    if (type && type === 'employeeSearch') {
                                                        // 获取员工信息
                                                        depot.get({
                                                            url: this.URL.USER.FIND_USER_LIST,
                                                            cb: (data) => {
                                                                if (data.code === 0) {
                                                                    this.userDbList = data.data;
                                                                } else if (data.code === 999) {
                                                                    this.$Message.error(data.message);
                                                                }
                                                            }
                                                        });
                                                    }
                                                });
                                            }
                                        });
                                    }
                                    formLayout.validateRule = {};
                                    let validateRules = formLayout.layout.validateRules;
                                    // 加工产生校验规则
                                    if (validateRules && validateRules.length > 0 && validateRules instanceof Array) {
                                        validateRules.forEach((validateRule) => {
                                            if (validateRule.rules && validateRule.rules instanceof Array) {
                                                validateRule.rules.forEach((rule) => {
                                                    if (rule && rule.hasOwnProperty('validator')) {
                                                        rule.validator = this[rule.validator];
                                                    }
                                                });
                                            }
                                            formLayout.validateRule[validateRule.key] = validateRule.rules;
                                        });
                                    }
                                });
                            }

                            let contentArr = formLayoutList;
                            let queryParams = {};
                            queryParams.taskInfoId = taskInfo.row.id;

                            depot.get({
                                url: this.URL.WORKFLOW.FIND_TASK_INFO_DETAIL,
                                config: {
                                    params: queryParams
                                },
                                cb: (data) => {
                                    this.showSpin = false;
                                    if (data.code === 0) {
                                        this.$Message.success('请求成功');

                                        // if (btnType === 'inProcessColumns') {
                                        data.data.workflowInstance.workflowFormItemList.forEach((workflowFormListItem, workflowFormListIndex) => {
                                            contentArr.forEach((contentArrItem, contentArrIndex) => {
                                                contentArrItem.formLayoutItemList.forEach((formLayoutItemListItem, formLayoutItemListIndex) => {
                                                    contentArrItem.layout.layout.rows.forEach((rowsItem, rowsIndex) => {
                                                        rowsItem.cols.forEach((colsItem, colsIndex) => {
                                                            if (workflowFormListItem.formLayoutItemId === formLayoutItemListItem.id && formLayoutItemListItem.labelKey === colsItem.key) {
                                                                if (colsItem.type === 'checkboxGroup') {
                                                                    let str = workflowFormListItem.labelValue;
                                                                    str = str.substring(1, str.length - 1);
                                                                    str = str.replace(/\"/g, '');
                                                                    let arr = str.split(',');
                                                                    contentArrItem.formData[workflowFormListItem.labelKey] = arr;
                                                                } else {
                                                                    contentArrItem.formData[workflowFormListItem.labelKey] = workflowFormListItem.labelValue;
                                                                }
                                                            }
                                                        });
                                                    });
                                                });
                                            });
                                        });
                                        // }

                                        // formLayoutList = contentArr;

                                        // TODO 获取打开方式
                                        let target = processNode.target;

                                        if (target) {
                                            if (target === 'modal') {
                                                this.showForm = true;
                                                this.currentTaskForm = processNode;
                                                this.currentFormLayoutList = formLayoutList;
                                                this.currentId = taskInfo.row.id;
                                                this.btnTypeStr = btnType;
                                            } else {
                                                let title = processNode.taskDefName;
                                                // util.openNewPage(this, 'taskFormTab', null, null, title);
                                                this.$router.push({
                                                    name: 'taskFormTab',
                                                    params: {
                                                        formlayoutList: formLayoutList,
                                                        processNode: processNode,
                                                        taskInfoId: taskInfo.row.id,
                                                        btnType: btnType
                                                    }
                                                });
                                            }
                                        }
                                    } else {
                                        this.$Message.error(data.message);
                                    }
                                },
                                ce: (error) => {
                                    this.showSpin = false;
                                }
                            });
                        } else if (data.code === 999) {
                            this.$Message.error(data.message);
                        }
                    },
                    ce: (error) => {
                        this.showSpin = false;
                    }
                });
            },
            // 编辑页面跳转
            editMissionDetails (missionId, procDefKey, workflowInstanceId) {
                if (!missionId) {
                    this.$Message.error('无法获取任务类型，请刷新后重试');
                    return;
                }
                this.$router.push({
                    name: 'missionEdit',
                    params: {
                        missionId: missionId,
                        procDefKey: procDefKey,
                        canStartProcessList: this.canStartProcessList,
                        workflowInstanceId: workflowInstanceId
                    }
                });
            },
            // 查看详情
            viewDetail (missionId, isDuplicate) {
                if (!missionId) {
                    this.$Message.error('无法获取任务类型，请刷新后重试');
                    return;
                }
                this.$router.push({
                    name: 'missionDetails',
                    params: {
                        missionId: missionId,
                        isDuplicate: isDuplicate
                    }
                });
            },
            // 删除当前条目
            delMissionDetails (missionId) {
                if (!missionId) {
                    this.$Message.error('无法获取任务类型，请刷新后重试');
                }

                if (missionId) {
                    this.$Modal.confirm({
                        title: '确认提示',
                        content: '确认要删除吗？',
                        loading: true,
                        onOk: () => {
                            this.showSpin = true;
                            depot.post({
                                url: this.URL.WORKFLOW.DELETE_PROCESS_BY_TASK_INFO_ID + '?taskInfoId=' + missionId,

                                cb: (data) => {
                                    this.showSpin = false;
                                    if (data.code === 0) {
                                        this.$Message.info('删除成功');
                                        this.$Modal.remove();
                                        this.resetPage();
                                    } else if (data.code === 999) {
                                        this.$Message.error(data.message);
                                    }
                                },
                                ce: (error) => {
                                    this.showSpin = false;
                                }
                            });
                        },
                        onCancel: () => {
                            this.$Message.info('取消删除');
                        }
                    });
                }
            },
            goToInProcessDataList () {
                this.$router.push({
                    name: 'workbench',
                    params: {
                        tab: 'inProcess'
                    }
                });
            },
            goToDuplicateDataList () {
                this.$router.push({
                    name: 'workbench',
                    params: {
                        tab: 'duplicate'
                    }
                });
            },
            goToWaitingDataList () {
                this.$router.push({
                    name: 'workbench',
                    params: {
                        tab: 'waiting'
                    }
                });
            }
        }
    };
</script>

<style scoped lang="less">
.btBg{
    min-width: 120px;
    width: auto;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    text-align: center;
    background-color: #a5a0a5;
    border: none;
    color:#fff;
    font-size: 14px;
    margin-left: 20px;
    margin-top: 20px;
    border-radius: 18px;
}


</style>
